JS - Element properties - clientHeight

revision:

returns the height of an element, including padding.

top

It returns the viewable height of an element in pixels, including padding, but not the border, scrollbar or margin. The property is read-only.

Syntax:

element.clientHeight : the viewable height of the element (in pixels) including padding

property value:

none :

example

Information about DIV:
Height: 250px
Width: 400px
Padding: 10px
Margin: 15px
Border: 5px

clientHeight: 270px
clientWidth: 420px

            <div>
                <div id="DIV">
                  <b>Information about DIV:</b><br>
                      Height: 250px<br>
                      Width: 400px<br>
                      Padding: 10px<br>
                      Margin: 15px<br>
                      Border: 5px<br>
                  <p id="prop"></p>
                </div>
              </div>
              <style>
                  #DIV{height: 250px;  width: 400px;  padding: 10px;  margin: 15px; 
                     border: 5px solid red;  background-color: lightblue; }
              </style>
              <script>
                  const element = document.getElementById("DIV");
                  let text = "clientHeight: " + element.clientHeight + "px<br>";
                  text += "clientWidth: " + element.clientWidth + "px";
                  document.getElementById("prop").innerHTML = text;
              </script>
Information about this div:
Height: 250px
Width: 400px
Padding: 10px
Margin: 15px
Border: 5px

clientHeight: 270px
offsetHeight: 280px
clientWidth: 420px
offsetWidth: 430px

            <div id="DIV2">
                <b>Information about this div:</b><br>
                Height: 250px<br>
                Width: 400px<br>
                Padding: 10px<br>
                Margin: 15px<br>
                Border: 5px<br>
                <p id="demo"></p>
            </div>
            <style>
                #DIV2 {height: 250px; width: 400px; padding: 10px; margin: 15px; 
                    border: 5px solid red; background-color: lightblue; }
            </style>
            <script>
                const ele = document.getElementById("DIV2");
                let text1 = "";
                text1 += "clientHeight: " + element.clientHeight + "px<br>";
                text1 += "offsetHeight: " + element.offsetHeight + "px<br>";
                text1 += "clientWidth: " + element.clientWidth + "px<br>";
                text1 += "offsetWidth: " + element.offsetWidth + "px";
                document.getElementById("demo").innerHTML = text1;
            </script>